{% extends 'base_product.html' %}
{% block body %}

    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
        <div class="col-md-5 p-lg-5 mx-auto my-5">
            <h1 class="display-4 fw-normal">Python</h1>
            <p class="lead fw-normal">2022 Python 期末项目.</p>
            <p class="lead fw-normal">来玩一下游戏吧！</p>
            <p class="lead fw-normal">制作人：徐嘉悦</p>
            <a class="btn btn-outline-secondary" href="{{ url_for('entry_page') }}">元音字母</a>
        </div>
        <div class="product-device shadow-sm d-none d-md-block"></div>
        <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
    </div>
    <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
        <div class="text-bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
            <div class="my-3 p-3">
                <h2 class="display-5">猜猜数字</h2>
                <p class="lead">猜出被遮盖住的游戏吧.</p>
                <p class="lead">回想一下控制流的知识点吧.</p>
            </div>
            <div class="bg-dark shadow-sm mx-auto"
                 style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
        </div>
        <div class="text-bg-body me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
            <div class="my-3 py-3">
                <h2 class="display-5">购物车添加中...</h2>
                <p class="lead">添加你喜欢的.</p>
                <p class="lead">回想一下list的知识点吧.</p>
            </div>
            <div class="bg-body shadow-sm mx-auto"
                 style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
        </div>
    </div>
{% endblock %}

